<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置密保</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <!-- 引入 js -->
    <script src="js/jquery.min.js"></script>
    <script src="js/commom.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/博客系统logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="reg.html">注册</a>
        <a href="myblog_list.html">我的</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog" id="secret">
            <h3>设置我的密保问题</h3>
            <div class="row">
                <span>密保问题</span>
                <input type="text" id="question" placeholder="输入12字以内的密保问题">
            </div>
            <div class="row">
                <span>密保答案</span>
                <input type="text" id="answer" placeholder="输入12字以内的密保答案">
            </div>
            <div class="row">
                <button id="submit" onclick="mysub()">提交</button>
            </div>
            <!-- <a id="forget" href="#">忘记密码</a> -->
        </div>
    </div>
    
    <script>
        function mysub() {
            // 1. 非空校验
            var question = jQuery("#question");
            var answer = jQuery("#answer");
            if (question.val() === "") {
                alert("密保问题为空!")
                question.focus(); // 将鼠标光标设置到用户名控件
                return;
            }
            if (answer.val() === "") {
                alert("密保答案为空!")
                answer.focus(); // 将鼠标光标设置到密码控件
                return;
            }
            if (question.val().length > 12) {
                alert("密保问题过长!")
                question.focus(); // 将鼠标光标设置到用户名控件
                return;
            }
            if (answer.val().length > 12) {
                alert("密保答案过长!")
                question.focus(); // 将鼠标光标设置到用户名控件
                return;
            }
            // 2. 发送 ajax 请求
            if(confirm("密保设置后不可修改!是否确认设置此密保?")) {
                jQuery.ajax({
                    // 请求的地址
                    url:"/user/secret",
                    // 请求类型
                    type:"POST",
                    // 请求的参数
                    data:{"question": question.val(), "answer": answer.val()},
                    // 回调函数
                    success:function(result) {

                        // 响应的结果
                        if (result != null && result.code === 200 && result.data === 1) {
                            // 密保设置成功
                            alert("恭喜!密保设置成功!");
                            location.href = "myblog_list.html";
                        }else if (result.code === -3 &&  result.data == null) {
                            alert("不可重复设置密保!");
                            location.href = "/myblog_list.html";
                        } else {
                            alert("密保设置失败!请稍后再试!");
                        }
                    }
                });
            }
            
        }
    </script>
</body>

</html>